/**
 * 在canvas上绘制图片，保持图片原样
 * @param {*} ctx canvas 2d实例对象
 * @param {*} src 图片地址
 * @param {*} x   画布x轴
 * @param {*} y   画布y轴
 * @param {*} width 图片宽度
 * @param {*} height 图片高度
 */
export function addImgToCanvas(ctx,src,x,y,width,height){
    return new Promise((reslove,reject)=>{
        let img = new Image();  
        img.setAttribute('crossOrigin', 'anonymous')  // 只有加上这一句，toDataURL转化图片时才不会报错
        img.src = src;
        img.onload = function() {
            if(width && height){
                if(height=='auto'){ // 按照宽度width的值等比压缩
                    // 计算压缩后的高度
                    height = (img.height * width)/img.width
                }else if(width == 'auto'){ // 按照高度的height值等比压缩
                    // 计算压缩后的宽度
                    width = (img.width * height)/img.height
                }
                ctx.drawImage(img, x, y,width,height);    
            }else{
                ctx.drawImage(img, x, y);
            }
            reslove({width,height}) //返回处理后的高宽度
        }
    })
}

/**
 * 在画布上绘制圆形图片
 * @param {*} ctx canvas 2d实例对象
 * @param {*} url 图片地址
 * @param {*} width 图片宽度
 * @param {*} height 图片高度
 * @param {*} x 画布x轴
 * @param {*} y 画布y轴
 * @returns 
 */
export const drawCircularImg = (ctx,url,width, height, x, y)=>{
    return new Promise((reslove,reject)=>{
        let img = new Image();  
        img.setAttribute('crossOrigin', 'anonymous')// 只有加上这一句，toDataURL转化图片时才不会报错
        img.src = url;
        img.onload = function() {
            let avatarurl_width = width;
            let avatarurl_heigth = height;
            let avatarurl_x = x;
            let avatarurl_y = y;
            ctx.save();
            ctx.beginPath();
            ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
            ctx.clip();
            ctx.drawImage(img, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
            ctx.restore();
            reslove(true)
        }
    })
}

/**
 * 在画布上绘制文本
 * @param {*} ctx canvas 2d实例对象
 * @param {*} type 文本类型：fillText实心文本，strokeText空心文本
 * @param {*} text 文本内容
 * @param {*} x  画布x抽 （文本位置计算时，是以左下为起点）
 * @param {*} y 画布y轴 （文本位置计算时，是以左下为起点）
 * @param {*} font 大小、字体
 * @param {*} align 对齐方式
 */
export const drawText = (ctx,type,text,x,y,font,color,align)=>{
    ctx.font=font;
    ctx.fillStyle = color
    ctx.textAlign = align || 'center'
    ctx[type](text,x,y);
}

/**
 * 在画布上绘制换行文本
 * @param {*} ctx canvas 2d实例对象
 * @param {*} str 需要绘制的字符串
 * @param {*} rowNumber 每行显示字符个数(按照1个汉字占的宽度等于2个字符的宽度)
 * @param {*} lines 需要显示多少行
 * @param {*} x 画布x轴
 * @param {*} y 画布y轴
 * @param {*} font 大小、字体
 * @param {*}lingheight  字体的高度
 */
export const drawTextMoreLine2 = (ctx,str,rowNumber,lines,x,y,font,color,lingheight)=> {
    const textHeight = lingheight || 30  // 字体的高度
    ctx.font = font || "32px Arial"
    ctx.textAlign = "left"
    ctx.fillStyle = color || "#F4C28B"
    let cpLine = Math.ceil(str.length / rowNumber) // 计算出需要显示的行数
    for(let i=0;i<cpLine;i++){ // 循环显示每行数据
        if(i<lines){
            let temp = str.substring(i*rowNumber,(i+1)*rowNumber)  //截取字符串： 每次截取rowNumber个字符
            let start = y+(i*textHeight) // 每行开始的位置
            if((i==(lines-1)) && cpLine > lines){ // 最后一行后面三个字符加省略号
                temp = temp.substring(0,rowNumber-1) + '...'  // 把最后一个字符换成省略号
            }
            ctx.fillText(temp,x,start)
        }else{
            break
        }
        
    }
}

/**
 * 绘制多行文本
 * @param {*} ctx canvas 2d实例对象
 * @param {*} text 文本内容
 * @param {*} x 文本绘制的起始坐标x
 * @param {*} y 文本绘制的起始坐标y
 * @param {*} maxWidth 绘制文本区域的宽度
 * @param {*} lineHeight 表示行高
 * @param {*} font 大小、字体
 * @param {*} color 字体颜色
 * @param {*} allowLines 允许显示的行数，不填表示不限制行数
 * @returns 
 */
export const drawTextMoreLine = (ctx,text, x, y, maxWidth=300, lineHeight,font,color,allowLines)=> {
    if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
        return;
    }
    // 字符分隔为数组
    var arrText = text.split('');
    var line = '';
    let lineNum = 1  // 自己加上的

    ctx.font = font || "32px Arial"
    ctx.textAlign = "left"
    ctx.fillStyle = color || "#F4C28B"
    
    for (var n = 0; n < arrText.length; n++) {
        var testLine = line + arrText[n];
        var metrics = ctx.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            if(allowLines && lineNum>=allowLines){  // 自己加上的
                break
            }
            ctx.fillText(line, x, y);
            line = arrText[n];
            y += lineHeight;
            lineNum++  // 自己加上的
        } else {
            line = testLine;
        }
        
    }
    // if(allowLines && lineNum>=allowLines){// 自己加上的
    //     line = line.substring(0,line.length-1) + '...'
    // }
    ctx.fillText(line, x, y);
};

/**
 * h绘制矩形
 * @param {*} ctx 
 * @param {*} bgColor 填充的颜色
 * @param {*} x 
 * @param {*} y 
 * @param {*} w 
 * @param {*} h 
 */
export const drawRectangle = (ctx,bgColor,x,y,w,h) =>{
    ctx.fillStyle = bgColor
    ctx.fillRect(x,y,w,h); 
}

/**
 * 根据宽或者高等比压缩图片，
 * @param {*} src 图片地址
 */
export function compressImg(src,width,height){
    return new Promise((reslove,reject)=>{
        let img = new Image();  
        img.setAttribute('crossOrigin', 'anonymous')  // 只有加上这一句，toDataURL转化图片时才不会报错
        img.src = src;
        img.onload = function() {
            if(height=='auto'){ // 按照宽度width的值等比压缩
                // 计算压缩后的高度
                height = (img.height * width)/img.width
            }else if(width == 'auto'){ // 按照高度的height值等比压缩
                // 计算压缩后的宽度
                width = (img.width * height)/img.height
            }  
            reslove({width,height}) //返回处理后的高宽度
        }
    })
}

/**
 * 判断字符串的长度，英文占1个字符，中文汉字占2个字符
 * @param {*} str 
 * @returns 
 */
export const getStrLength = (str) => {  
    var len = 0;  
    for (var i=0; i<str.length; i++) {  
      if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {  
         len += 2;  
       } else {  
         len ++;  
       }  
    }  
    console.log("字符串的长度：",len)
    return len;  
  }

